<template>
	<view>
		<view class="trend-con">
			<view class="trend">年龄比例图</view>
		</view>
		<view class="qiun-charts">
			<canvas canvas-id="ageratio" id="ageratio" class="charts-pie" @touchstart="touchPie" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
		</view>

		<!-- 比例列表 -->
		<view class="age-conlist" v-for="(item,index) in dataList" :key="index">
			<view class="age-conflex">
				<u-icon name="account-fill" color="#999" size="28"></u-icon>{{item.name}}
			</view>
			<view class="age-conflex age-center">{{item.proportion}}%</view>
			<view class="age-conflex age-right">
				<text class="age-pic">{{item.num}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js'
	var _this;
	var ageratio = null;

	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				piearr: [],
				dataList: [{
					name: '20以下',
					proportion: '0.57',
					num: '3',
				}, {
					name: '20-25',
					proportion: '2.65',
					num: '16',
				}, {
					name: '25-30',
					proportion: '17.01',
					num: '90',
				}, {
					name: '30-35',
					proportion: '46.12',
					num: '266',
				}, {
					name: '35-40',
					proportion: '14.37',
					num: '76',
				}, {
					name: '40-45',
					proportion: '8.51',
					num: '45',
				}, {
					name: '45-50',
					proportion: '11.12',
					num: '48',
				}],
				ageData: {
					series: [{
						name: "20以下",
						data: 50,
						// legendShape: 'line', // 图列的形状
					}, {
						name: "20-25",
						data: 30
					}, {
						name: "25-30",
						data: 20
					}, {
						name: "30-35",
						data: 18
					}, {
						name: "35-40",
						data: 30
					}, {
						name: "40-45",
						data: 10
					}, {
						name: "45-50",
						data: 8,
						color: '#c58300'
					}]
				}
			}
		},
		onLoad() {
			_this = this;
			this.cWidth = uni.upx2px(750)
			this.cHeight = uni.upx2px(500)
			this.refreshList();
		},
		methods: {
			refreshList() {
				_this.StructuralAnalysis("ageratio", this.ageData)
			},
			// 图表渲染
			StructuralAnalysis(canvasId, chartData) {
				ageratio = new uCharts({
					$this: this,
					canvasId: canvasId,
					type: 'pie',
					fontSize: 11,
					legend: {
						show: true,
						position: 'right',
						float: 'center',
						itemGap: 10,
						padding: 5,
						lineHeight: 26,
						margin: 5,
						borderWidth: 1
					},
					background: '#FFFFFF',
					pixelRatio: 1,
					series: chartData.series,
					animation: true,
					width: this.cWidth,
					height: this.cHeight,
					dataLabel: true,
					extra: {
						pie: {
							labelWidth: 15
						}
					},
				})
				this.piearr = ageratio.opts.series;
			},

			touchPie(e) {
				ageratio.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.age-conlist {
		display: flex;
		padding: 20rpx 40rpx;
		border-bottom: 1px solid $uni-border-color;

		.age-conflex {
			flex: 1;
		}

		.age-center {
			text-align: center;
		}

		.age-right {
			text-align: right;
		}

		.age-pic {
			padding: 4rpx 14rpx;
			background-color: #1ae1ff;
			border-radius: 50%;
			color: #FFFFFF;
		}
	}
</style>
